<template>
  <view class="container">
    <view class="body">
      <view class="avatar-container">
        <img :src="data.avatar" class="avatar"/>
        <view class="text-container">
          <text class="user-name">{{ data.userName }}</text>
          <text class="report-to" v-if="receive == 0">
            汇报给:
            <text class="share-user-name">{{ data.shareUserName }}</text>
          </text>
        </view>
      </view>
      <view class="notes-container">
        <view class="note-item">
          <text class="note-required">*</text>
          <text class="note-label">{{ note.workNote }}</text>
        </view>
        <view class="html-content">
          <mp-html :content="data.workContext.html" :lazy-load="true"></mp-html>
        </view>
        <view class="note-item">
          <text class="note-label">{{ note.planNote }}</text>
        </view>
        <view class="html-content">
          <mp-html :content="data.planContext.html" :lazy-load="true"></mp-html>
        </view>
        <view class="note-item">
          <text class="note-label">{{ note.otherNote }}</text>
        </view>
        <view class="html-content">
          <mp-html :content="data.otherContext.html" :lazy-load="true"></mp-html>
        </view>
        <view class="attachment">
          <text class="attachment-label">附件</text>
        </view>
        <view class="attachment-file">
          <view class="text-overflow">{{ data.attachmentFileName }}</view>
          <button v-if="data.attachmentFileName" size="mini" class="download-btn" @click="saveFileByBrowser">点击下载
          </button>
        </view>
        <view class="report-time">
          <text class="time-text">汇报时间: {{ data.createDateTime }}</text>
        </view>
        <view class="line"></view>
        <report-comment v-for="(item, index) in data.reportComment" :data="item"/>
        <input-comment :reportId="data.reportId" @onSubmitSucess="onSubmitSucess"/>
      </view>
    </view>
  </view>
</template>

<script>
import {getAttachment, getCommentByReportId} from '../../../api/report/report';
import {BaseUrl} from '@/api/report/utils/request';
import inputComment from '@/pages/tab2/record/input-comment.vue';
import reportComment from '@/pages/tab2/record/report-comment.vue';

export default {
  onLoad() {
    let context = uni.getStorageSync('reportDetail');
    this.data = context.data;
    this.note = context.note;
    getCommentByReportId(context.data.reportId).then((res) => {
      this.data.reportComment = res.data;
    });
    console.log(this.data);
  },
  data() {
    return {
      receive: 0,
      note: {},
      data: {},
      scrollTop: 0,
      old: {
        scrollTop: 0
      }
    };
  },

  components: {
    inputComment,
    reportComment
  },
  methods: {
    saveFileByBrowser() {
      // #ifdef APP-PLUS
      console.log('打开外部');
      plus.runtime.openURL(getAttachment({fileName: this.data.attachmentFileName, path: this.data.attachmentPath}));
      // #endif
      // #ifdef H5
      window.open(getAttachment({fileName: this.data.attachmentFileName, path: this.data.attachmentPath}));
      // #endif
    },
    onSubmitSucess(commentData) {
      this.data.reportComment = commentData;
    }
  }
};
</script>

<style scoped lang="scss">
// 通用样式
.scroll-view-item {
  height: 200rpx;
}

.text-overflow {
  font-size: 35rpx;
  margin-left: 10rpx;
  overflow: hidden;
  width: 400rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line {
  height: 1px;
  background-color: #ccc;
  margin: 10rpx 0;
}

.container {
  border-radius: 20rpx;
  margin: 20rpx;
}

.body {
  background-color: #fff;
  padding: 10rpx;
  margin: 10rpx;
}

/* Avatar Section */
.avatar-container {
  display: flex;
  padding: 10rpx;
}

.avatar {
  height: 100rpx;
  width: 100rpx;
  border-radius: 10rpx;
  margin: 10rpx;
  background-color: skyblue;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-name {
  font-size: 40rpx;
  margin: 0px 10rpx;
}

.report-to {
  font-size: 30rpx;
  margin: 0px 10rpx;
  color: #ccc;
}

.share-user-name {
  color: black;
}

/* Notes Section */
.notes-container {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
}

.note-item {
  display: flex;
  align-items: center;
  padding: 10rpx;
}

.note-required {
  color: red;
  font-size: 30rpx;
}

.note-label {
  font-size: 30rpx;
  color: #ccc;
}

.html-content {
  padding: 10rpx;
}

/* Attachment Section */
.attachment {
  padding: 10rpx;
}

.attachment-label {
  font-size: 30rpx;
  color: #ccc;
}

.attachment-file {
  display: flex;
  padding: 10rpx;
}

.download-btn {
  margin-left: 10rpx;
}

.report-time {
  padding: 10rpx;
}

.time-text {
  color: #ccc;
}

/* Line Divider */
.line {
  height: 1px;
  background-color: #ccc;
  margin: 10rpx 0;
}
</style>
